
import { Text, View, Image } from '@tarojs/components'
import { ViewProps } from '@tarojs/components/types/View'
import Taro from '@tarojs/taro'
import React from 'react'


type Props = {
    mode: 'left' | 'center';
    style: React.CSSProperties;
    title: string | React.ReactNode;
    titleStyle: React.CSSProperties;
    headerLeft: React.ReactNode;
}


export default (props: Partial<Props> & ViewProps) => {
    const {
        style = { backgroundColor: 'white' },
        mode = 'left',
        title,
        titleStyle,
        headerLeft,
    } = props

    const [state, dispatch] = React.useReducer((state, action) => ({ ...state, ...action }), {
        statusBarHeight: 20,
    })

    React.useEffect(() => {
        (async () => {
            let res = await Taro.getSystemInfoSync()
            // console.log('res', res)
            dispatch({ statusBarHeight: res.statusBarHeight })

        })()
    }, [])

    return (
        <View style={{ ...styles.container, paddingTop: state.statusBarHeight + 'px', ...style as React.CSSProperties }}>
            <View style={styles.barContainer}>
                {(() => {
                    if (headerLeft) return headerLeft
                    return <HeaderLeft
                        icon={require('./goback.png')}
                        title={mode == 'left' ? (title as string) : ''}
                        onClick={() => Taro.navigateBack()}
                    />
                })()}

                <View />
            </View>


            {
                mode == 'center' &&
                <TitleView>
                    {(() => {
                        if (typeof (title) == 'string') {
                            return <Text style={{ ...styles.titleStyle, ...titleStyle }} className='oneLine'>{title}</Text>
                        }
                        if (React.isValidElement(title)) return title
                    })()}
                </TitleView>
            }


        </View>


    )
}


type HeaderLeftProp = {
    icon: string,
    title: string,
    onClick()
}

const HeaderLeft = (props: HeaderLeftProp) => {
    return (
        <View style={styles.headerLeft} onClick={e => {
            e.stopPropagation()
            props.onClick();
        }}>
            <Image style={{ width: '9px', height: '16px', marginRight: '10px', display: 'flex', flexShrink: 0 }} src={props.icon} mode='aspectFit' />
            <Text style={{ flex: 1, ...styles.titleStyle }} className='oneLine'>{props.title}</Text>
        </View>
    )
}
const TitleView = (props) => {
    return (
        <View style={styles.titleView}>
            {props.children}
        </View>
    )
}

const styles: Record<string, React.CSSProperties> = {

    container: {
        paddingTop: '20px',
        position:'relative',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },

    barContainer: {
        minHeight: '44px',
        width: '100vw',
        backgroundColor: 'transparent',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    headerLeft: {
        maxWidth: 'calc(100vw - 150px)',
        minWidth: '50px',
        height: '100%',
        display: 'flex',
        flexShrink: 0,
        alignItems: 'center',
        paddingLeft: '15px',
    },
    titleView: {
        zIndex: 0,
        position: 'absolute',
        maxWidth:'50vw',
        minHeight:'44px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
    titleStyle: {
        fontSize: '16px',
        color: '#333333',
    },
}